<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试原生js发送Ajax请求</title>
    </head>
    <body>
        <h2>该页面是测试使用原生js发送ajax请求</h2>
        <button id="btn">点我, 发送POST请求</button>
        <div id="div"></div>
        
        <script type="text/javascript">
            document.getElementById("btn").onclick = function(){
                // 1. 实例化一个XMLHttpRequest请求
                let xhr = new XMLHttpRequest()
                // 2. 给该对象绑定一个事件监听, 名称为: onreadystatechange
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4 && xhr.status === 200){
                        document.getElementById("div").innerHTML = xhr.response
                    }
                }
                // 3. 指定发送请求的: 方式, 地址, 参数
                xhr.open("POSt", "http://localhost:3000/test_post")
                // 设置POST请求所特有的请求头 !!!
                xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
                // 4. 发送请求
                xhr.send('name=kobe&age=18')
            }
        </script>
    </body>
</html>